<template>
    <div ref="container"></div>
  </template>
  
  <script>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
  import dat from 'dat.gui';
  import { Water } from "three/examples/jsm/objects/Water2"
  import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
 
  
  export default {
    name: 'ThreeScene',
    mounted() {
      this.init();
    },
    methods: {
      init() {
        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000);
  
        // 创建相机
        const camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          0.1,
          2000
        );
        camera.position.z = 5;
  
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        this.$refs.container.appendChild(renderer.domElement);
  
        // 创建控制器
        const controls = new OrbitControls(camera, renderer.domElement);
  
        // 创建dat.gui
        const gui = new dat.GUI();
  
        // 添加一个立方体到场景中
        const geometry = new THREE.SphereGeometry(1000, 60, 60);
        const video = document.createElement('video');
        video.src = '../../public/texture/sky.mp4';
        video.loop = true;
        video.muted = true;
        video.play();
        const texture = new THREE.VideoTexture(video);
        const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
        const cube = new THREE.Mesh(geometry, material);
        cube.scale.set(1, 1, 1);
          scene.add(cube);
          scene.background = texture
            scene.environment = texture
          //创建水面
          const waterGeometry = new THREE.CircleBufferGeometry(300, 64)
          const water = new Water(waterGeometry, {
              textureWidth: 1024,
              textureHeight: 1024,
              color: 0x0080ff,
              flowDirection: new THREE.Vector2(1, 1),
              scale:1,
          })
          // 水面旋转至水平
          water.rotation.x = -Math.PI / 2;
          scene.add(water)

        //加载模型
        const loader = new GLTFLoader()
      
          loader.load("/public/model/lowpoly.glb", (gltf) => {
            console.log(gltf.scene);
          scene.add(gltf.scene)
        })

        const light = new THREE.AmbientLight( 0x404040 ); // soft white light
          scene.add(light);
       
        
        // 添加dat.gui控制器
        const cubeFolder = gui.addFolder('Cube');
        cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2, 0.01);
        cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2, 0.01);
        cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2, 0.01);
        cubeFolder.open();
  
        // 渲染循环
        const animate = () => {
          requestAnimationFrame(animate);
  
          // 更新控制器
          controls.update();
  
          renderer.render(scene, camera);
        };
        animate();
      },
    },
  };
  </script>
  
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  canvas {
    width: 100vh;
    height: 100vw;
  }
  </style>
  